<template>
  <div v-loading="loading" class="report-fourth">
    <section class="rf-fourth">
      <section class="top">
        <el-date-picker
          v-model="timeValue"
          type="daterange"
          align="left"
          unlink-panels
          @change="handleTimeChange"
          value-format="yyyy-MM-dd"
          range-separator="–"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          class='date-picker-input'>
        </el-date-picker>
      </section>
      <section class="middle">
        <section class="m-item" @click="changeMitem(1)">
          <div class="img-wrapper img1"></div>
          <section class="r-wrapper">
            <div class="w-top">发送次数</div>
            <div class="w-middle" style="color: #15C78A">
              <count-num :countNum="pageInfo.sendCount || 0"></count-num>
            </div>
          </section>
          <div class="line line1" :class="mItem === 1 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(2)">
          <div class="img-wrapper img2"></div>
          <section class="r-wrapper">
            <div class="w-top">预计发送人数</div>
            <div class="w-middle" style="color: #FA376C">
              <count-num :countNum="pageInfo.expectSendCount || 0"></count-num>
            </div>
          </section>
          <div class="line line2" :class="mItem === 2 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(3)">
          <div class="img-wrapper img3"></div>
          <section class="r-wrapper">
            <div class="w-top">实际送达人数</div>
            <div class="w-middle" style="color: #3496FF">
              <count-num :countNum="pageInfo.actualSendCount || 0"></count-num>
            </div>
          </section>
          <div class="line line3" :class="mItem === 3 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(4)">
          <div ref="echart2" class="e-chart2"></div>
          <section class="r-wrapper">
            <div>消息类型</div>
          </section>
          <div class="line line4" :class="mItem === 4 ? 'is-line' : ''"></div>
        </section>
      </section>
      <section class="bottom">
        <div ref="echart1" class="e-chart1"></div>
      </section>
    </section>
    <section class="rf-third">
      <div style="margin-bottom: 20px;font-weight: bolder">
        标签阅读分析
        <span style="margin-left: 12px;font-size: 12px;color: #666;font-weight: 500">仅统计通过标签群发图文数据</span>
      </div>
      <el-date-picker
        style="margin-bottom: 16px;"
        v-model="timeValue1"
        type="daterange"
        align="left"
        unlink-panels
        @change="handleTimeChange1"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <!-- <span v-show="tableData.length > 0" style="margin-left: 20px;color: #FC713D;cursor: pointer">
        <a :href="currentUrl + `/api/test/wx/data/analysis/?download=true&userid=${userId}&wxId=${wxId}&page_size=${pageSize}&page=${page}&ref_date_0=${timeValue1[0] || ''}&ref_date_1=${timeValue1[1] || ''}`" style="color: #FC713D;">导出</a>
      </span> -->
      <el-table
        tooltip-effect="light"
        :data="preOptions"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          label="标签名称"
          prop="tagName"
          show-overflow-tooltip
          fixed>
        </el-table-column>
        <el-table-column
          prop="tagType"
          show-overflow-tooltip
          label="标签类型">
          <template slot-scope="scope">
            <span>{{scope.row.tagType === 0 ? 'medchat' : '微信'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tagNumber"
          label="标签人数">
        </el-table-column>
        <el-table-column
          prop="massMessageCount"
          show-overflow-tooltip
          label="接收群发次数">
        </el-table-column>
        <el-table-column
          prop="intPageReadCount"
          show-overflow-tooltip
          label="阅读数">
        </el-table-column>
        <el-table-column
          prop="openScale"
          show-overflow-tooltip
          label="打开率">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.targetCount === 0 ? '0%' : (scope.row.intPageReadCount / scope.row.targetCount).toFixed(2)  + '%'}}</span> -->
            <span>{{scope.row | formatOpenScale}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="shareCount"
          show-overflow-tooltip
          label="分享人数">
        </el-table-column>
        <el-table-column
          prop="likeCount"
          show-overflow-tooltip
          label="收藏人数">
        </el-table-column>
        <el-table-column
          prop="oriPageReadUser"
          show-overflow-tooltip
          label="原文阅读人数">
        </el-table-column>
      </el-table>
      <section class="pagenation">
        <el-pagination
          v-show='preOptions.length'
          background
          :page-size="pageSize"
          :page-sizes="pageSizesG"
          @size-change="handleSizeChange"
          :current-page="page"
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next"
          :total="count">
        </el-pagination>
      </section>
    </section>
  </div>
</template>

<script>
import countNum from 'public/countNum'
const lineColorList = ['#3496FF', '#40C4FF', '#42D6A3', '#FF956E', '#FFD64E', '#FA6B92', '#9F89E8', '#E062AE', '#E690D1', '#7570F0', '#FFA3A3', '#FFCD9B', '#A0D167', '#80983D']
export default {
  components: {
    countNum
  },
  data () {
    return {
      wxId: sessionStorage.getItem('wxId'),
      userId: sessionStorage.getItem('userId'),
      loading: false,
      pageSize: 10,
      page: 1,
      count: 0,
      preOptions: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '昨天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近半个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 16)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      timeValue: [],
      timeValue1: [],
      mItem: 1,
      pageInfo: {
        actualSendCountList: [],
        expectSendCount: 0,
        actualSendCount: 0,
        expectSendCountList: [],
        messageType: [],
        messageTypeList: [],
        sendCount: 0,
        sendCountList: []
      },
      tableData: [],
      chart1: null,
      chart2: null
    }
  },
  computed: {
    seriesType () {
      if (this.mItem === 1) {
        return 'sendCountList'
      } else if (this.mItem === 2) {
        return 'expectSendCountList'
      } else if (this.mItem === 3) {
        return 'actualSendCountList'
      } else if (this.mItem === 4) {
        return 'messageTypeList'
      }
    },
    colorList () {
      if (this.mItem === 1) {
        return ['#15C78A']
      } else if (this.mItem === 2) {
        return ['#FA376C']
      } else if (this.mItem === 3) {
        return ['#3496FF']
      } else if (this.mItem === 4) {
        return lineColorList
      }
    }
  },
  filters: {
    formatOpenScale (val) {
      if (val.targetCount === 0) {
        return '0%'
      } else {
        return (val.intPageReadCount / val.targetCount).toFixed(2) + '%'
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.getTable()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTable()
    },
    handleTimeChange () {
      this.getInfo()
    },
    handleTimeChange1 () {
      this.page = 1
      this.getTable()
    },
    changeMitem (val) {
      this.mItem = val
      this.init1()
    },
    // 下方echarts初始化
    init1 () {
      if (!this.chart1) {
        this.chart1 = window.echarts.init(this.$refs.echart1)
      }
      let option = {
        color: this.colorList,
        minInterval: 1,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: this.pageInfo[this.seriesType].legend
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {color: '#333'},
            data: this.pageInfo.refDateList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {color: '#333'}
          }
        ],
        series: this.pageInfo[this.seriesType].series
      }
      this.chart1.setOption(option, { notMerge: true })
    },
    init2 () {
      if (!this.chart2) {
        this.chart2 = window.echarts.init(this.$refs.echart2)
      }
      let option = {
        color: lineColorList,
        grid: {
          left: 0, // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          top: 'middle',
          left: 100,
          textStyle: {
            color: '#788288',
            fontSize: 13
          },
          icon: 'roundRect',
          data: this.pageInfo.messageTypeList.legend,
          itemWidth: 14
        },
        series: [
          {
            name: '访问来源1',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['20%', '50%'],
            avoidLabelOverlap: false,
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            label: {
              normal: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: '10'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: (this.pageInfo.pie.length && this.pageInfo.pie) || [0]
          }
        ]
      }
      // let option = {
      //   color: lineColorList,
      //   legend: {
      //     orient: 'vertical',
      //     left: 100,
      //     data: this.pageInfo.messageTypeList.legend,
      //     itemWidth: 14
      //   },
      //   series: [
      //     {
      //       name: '访问来源1',
      //       type: 'pie',
      //       radius: ['50%', '70%'],
      //       center: ['20%', '50%'],
      //       avoidLabelOverlap: false,
      //       tooltip: {
      //         trigger: 'item',
      //         formatter: '{a} <br/>{b}: {c} ({d}%)'
      //       },
      //       label: {
      //         normal: {
      //           show: false,
      //           position: 'center'
      //         },
      //         emphasis: {
      //           show: true,
      //           textStyle: {
      //             fontSize: '12',
      //             fontWeight: 'bold'
      //           }
      //         }
      //       },
      //       labelLine: {
      //         normal: {
      //           show: false
      //         }
      //       },
      //       data: this.pageInfo.pie.length || [0]
      //     }
      //   ]
      // }
      this.chart2.setOption(option, { notMerge: true })
    },
    handleData () {
      // 处理"发送次数"--------------------
      if (this.pageInfo.sendCountList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.sendCountList))
        this.pageInfo.sendCountList = {}
        this.pageInfo.sendCountList.legend = ['发送次数']
        this.pageInfo.refDateList = this.getdiffdate(this.timeValue[0] || '', this.timeValue[1] || '')
        this.pageInfo.sendCountList.series = []
        for (var j = 0; j < this.pageInfo.sendCountList.legend.length; j++) {
          this.pageInfo.sendCountList.series.push({name: '发送次数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var js = 0; js < this.pageInfo.refDateList.length; js++) {
          this.pageInfo.sendCountList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          this.pageInfo.sendCountList.series.forEach((eless, ind) => {
            this.pageInfo.sendCountList.series[ind].data[index] = ele.sendCount
          })
        })
        this.pageInfo.sendCountList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"预计发送人数"--------------------
      if (this.pageInfo.expectSendCountList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.expectSendCountList))
        this.pageInfo.expectSendCountList = {}
        this.pageInfo.expectSendCountList.legend = ['预计发送人数']
        this.pageInfo.expectSendCountList.series = []
        for (var y = 0; y < this.pageInfo.expectSendCountList.legend.length; y++) {
          this.pageInfo.expectSendCountList.series.push({name: '预计发送人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var ys = 0; ys < this.pageInfo.refDateList.length; ys++) {
          this.pageInfo.expectSendCountList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          this.pageInfo.expectSendCountList.series.forEach((eless, ind) => {
            this.pageInfo.expectSendCountList.series[ind].data[index] = ele.expectSendCount
          })
        })
        this.pageInfo.expectSendCountList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"实际送达人数"--------------------
      if (this.pageInfo.actualSendCountList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.actualSendCountList))
        this.pageInfo.actualSendCountList = {}
        this.pageInfo.actualSendCountList.legend = ['实际送达人数']
        this.pageInfo.actualSendCountList.series = []
        for (var z = 0; z < this.pageInfo.actualSendCountList.legend.length; z++) {
          this.pageInfo.actualSendCountList.series.push({name: '实际送达人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var zs = 0; zs < this.pageInfo.refDateList.length; zs++) {
          this.pageInfo.actualSendCountList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          this.pageInfo.actualSendCountList.series.forEach((eless, ind) => {
            this.pageInfo.actualSendCountList.series[ind].data[index] = ele.actualSendCount
          })
        })
        this.pageInfo.actualSendCountList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"消息类型"--------------------
      if (this.pageInfo.messageTypeList && this.pageInfo.messageTypeList.length) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.messageTypeList))
        let tempLegend = []
        this.pageInfo.messageTypeList.forEach(ele => {
          if (ele.typeDataList) {
            ele.typeDataList.forEach(eles => {
              if (tempLegend.indexOf(eles.type) === -1) {
                tempLegend.push(eles.type)
              }
            })
          }
        })
        console.log('tempLegend: ', tempLegend)
        this.pageInfo.messageTypeList = {}
        this.pageInfo.messageTypeList.legend = tempLegend
        this.pageInfo.messageTypeList.series = []
        for (var k = 0; k < this.pageInfo.messageTypeList.legend.length; k++) {
          this.pageInfo.messageTypeList.series.push({name: this.pageInfo.messageTypeList.legend[k], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var ks = 0; ks < this.pageInfo.refDateList.length; ks++) {
          this.pageInfo.messageTypeList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          if (ele.typeDataList) {
            ele.typeDataList.forEach(eles => {
              this.pageInfo.messageTypeList.series.forEach((eless, ind) => {
                if (eless.name === eles.type) {
                  this.pageInfo.messageTypeList.series[ind].data[index] = eles.count
                }
              })
            })
          }
        })
        this.pageInfo.messageTypeList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
          switch (ele.name) {
            case '1':
              ele.name = '图片'
              break
            case '2':
              ele.name = '语音'
              break
            case '3':
              ele.name = '视频'
              break
            case '4':
              ele.name = '文本'
              break
            case '5':
              ele.name = '图文'
              break
            // case 'VIEW':
            //   ele.name = '链接'
            //   break
          }
        })
      }
      if (this.pageInfo.messageTypeList.legend && this.pageInfo.messageTypeList.legend.length) {
        this.pageInfo.messageTypeList.legend.forEach((ele, index) => {
          switch (ele) {
            case '1':
              this.pageInfo.messageTypeList.legend[index] = '图片'
              break
            case '2':
              this.pageInfo.messageTypeList.legend[index] = '语音'
              break
            case '3':
              this.pageInfo.messageTypeList.legend[index] = '视频'
              break
            case '4':
              this.pageInfo.messageTypeList.legend[index] = '文本'
              break
            case '5':
              this.pageInfo.messageTypeList.legend[index] = '图文'
              break
            // case 'VIEW':
            //   this.pageInfo.messageTypeList.legend[index] = '链接'
            //   break
          }
        })
      }
      console.log('pageInfo.messageTypeList: ', this.pageInfo.messageTypeList)
      let arr = JSON.parse(JSON.stringify(this.pageInfo.messageType))
      arr.forEach(ele => {
        ele.name = ele.type
        delete ele.type
        ele.value = ele.count
      })
      arr.forEach(ele => {
        switch (ele.name) {
          case '1':
            ele.name = '图片'
            break
          case '2':
            ele.name = '语音'
            break
          case '3':
            ele.name = '视频'
            break
          case '4':
            ele.name = '文本'
            break
          case '5':
            ele.name = '图文'
            break
          // case 'VIEW':
          //   ele.name = '链接'
          //   break
        }
      })
      // if (this.pageInfo.messageType) {
      //   for (let key in this.pageInfo.messageType) {
      //     let temp = {
      //       name: key,
      //       value: this.pageInfo.messageType[key]
      //     }
      //     arr.push(temp)
      //   }
      // }
      this.pageInfo.pie = arr
    },
    // 页面初始化请求数据
    getInfo () {
      if (!sessionStorage.getItem('wechatId')) {
        this.handleData()
        this.init1()
        this.init2()
        return false
      }
      // this.loading = true
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/analyze/${appid}/mass/messageStat?wechatId=${sessionStorage.getItem('wechatId')}&startTime=${(this.timeValue && this.timeValue[0]) || ''}&endTime=${(this.timeValue && this.timeValue[1]) || ''}`
      this.get(url).then(rsp => {
        this.loading = false
        this.pageInfo = rsp.data.data
        this.handleData()
        // // 处理"发送次数"--------------------
        // if (this.pageInfo.sendCountList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.sendCountList))
        //   this.pageInfo.sendCountList = {}
        //   this.pageInfo.sendCountList.legend = ['发送次数']
        //   this.pageInfo.refDateList = this.getdiffdate(this.timeValue[0] || '', this.timeValue[1] || '')
        //   this.pageInfo.sendCountList.series = []
        //   for (var j = 0; j < this.pageInfo.sendCountList.legend.length; j++) {
        //     this.pageInfo.sendCountList.series.push({name: '发送次数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var js = 0; js < this.pageInfo.refDateList.length; js++) {
        //     this.pageInfo.sendCountList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     this.pageInfo.sendCountList.series.forEach((eless, ind) => {
        //       this.pageInfo.sendCountList.series[ind].data[index] = ele.sendCount
        //     })
        //   })
        //   this.pageInfo.sendCountList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"预计发送人数"--------------------
        // if (this.pageInfo.expectSendCountList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.expectSendCountList))
        //   this.pageInfo.expectSendCountList = {}
        //   this.pageInfo.expectSendCountList.legend = ['预计发送人数']
        //   this.pageInfo.expectSendCountList.series = []
        //   for (var y = 0; y < this.pageInfo.expectSendCountList.legend.length; y++) {
        //     this.pageInfo.expectSendCountList.series.push({name: '预计发送人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var ys = 0; ys < this.pageInfo.refDateList.length; ys++) {
        //     this.pageInfo.expectSendCountList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     this.pageInfo.expectSendCountList.series.forEach((eless, ind) => {
        //       this.pageInfo.expectSendCountList.series[ind].data[index] = ele.expectSendCount
        //     })
        //   })
        //   this.pageInfo.expectSendCountList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"实际送达人数"--------------------
        // if (this.pageInfo.actualSendCountList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.actualSendCountList))
        //   this.pageInfo.actualSendCountList = {}
        //   this.pageInfo.actualSendCountList.legend = ['实际送达人数']
        //   this.pageInfo.actualSendCountList.series = []
        //   for (var z = 0; z < this.pageInfo.actualSendCountList.legend.length; z++) {
        //     this.pageInfo.actualSendCountList.series.push({name: '实际送达人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var zs = 0; zs < this.pageInfo.refDateList.length; zs++) {
        //     this.pageInfo.actualSendCountList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     this.pageInfo.actualSendCountList.series.forEach((eless, ind) => {
        //       this.pageInfo.actualSendCountList.series[ind].data[index] = ele.actualSendCount
        //     })
        //   })
        //   this.pageInfo.actualSendCountList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"消息类型"--------------------
        // if (this.pageInfo.messageTypeList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.messageTypeList))
        //   let tempLegend = []
        //   this.pageInfo.messageTypeList.forEach(ele => {
        //     if (ele.typeDataList) {
        //       ele.typeDataList.forEach(eles => {
        //         if (tempLegend.indexOf(eles.type) === -1) {
        //           tempLegend.push(eles.type)
        //         }
        //       })
        //     }
        //   })
        //   this.pageInfo.messageTypeList = {}
        //   this.pageInfo.messageTypeList.legend = tempLegend
        //   this.pageInfo.messageTypeList.series = []
        //   for (var k = 0; k < this.pageInfo.messageTypeList.legend.length; k++) {
        //     this.pageInfo.messageTypeList.series.push({name: this.pageInfo.messageTypeList.legend[k], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var ks = 0; ks < this.pageInfo.refDateList.length; ks++) {
        //     this.pageInfo.messageTypeList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     if (ele.typeDataList) {
        //       ele.typeDataList.forEach(eles => {
        //         this.pageInfo.messageTypeList.series.forEach((eless, ind) => {
        //           if (eless.name === eles.type) {
        //             this.pageInfo.messageTypeList.series[ind].data[index] = eles.count
        //           }
        //         })
        //       })
        //     }
        //   })
        //   this.pageInfo.messageTypeList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //     switch (ele.name) {
        //       case 'NEWS':
        //         ele.name = '图文'
        //         break
        //       case 'IMAGE':
        //         ele.name = '图片'
        //         break
        //       case 'TEXT':
        //         ele.name = '文本'
        //         break
        //       case 'VIDEO':
        //         ele.name = '视频'
        //         break
        //       case 'VOICE':
        //         ele.name = '音频'
        //         break
        //       case 'VIEW':
        //         ele.name = '链接'
        //         break
        //     }
        //   })
        // }
        // this.pageInfo.messageTypeList.legend.forEach((ele, index) => {
        //   switch (ele) {
        //     case 'NEWS':
        //       this.pageInfo.messageTypeList.legend[index] = '图文'
        //       break
        //     case 'IMAGE':
        //       this.pageInfo.messageTypeList.legend[index] = '图片'
        //       break
        //     case 'TEXT':
        //       this.pageInfo.messageTypeList.legend[index] = '文本'
        //       break
        //     case 'VIDEO':
        //       this.pageInfo.messageTypeList.legend[index] = '视频'
        //       break
        //     case 'VOICE':
        //       this.pageInfo.messageTypeList.legend[index] = '音频'
        //       break
        //     case 'VIEW':
        //       this.pageInfo.messageTypeList.legend[index] = '链接'
        //       break
        //   }
        // })
        // let arr = JSON.parse(JSON.stringify(this.pageInfo.messageType))
        // arr.forEach(ele => {
        //   ele.name = ele.type
        //   delete ele.type
        //   ele.value = ele.count
        // })
        // arr.forEach(ele => {
        //   switch (ele.name) {
        //     case 'NEWS':
        //       ele.name = '图文'
        //       break
        //     case 'IMAGE':
        //       ele.name = '图片'
        //       break
        //     case 'TEXT':
        //       ele.name = '文本'
        //       break
        //     case 'VIDEO':
        //       ele.name = '视频'
        //       break
        //     case 'VOICE':
        //       ele.name = '音频'
        //       break
        //     case 'VIEW':
        //       ele.name = '链接'
        //       break
        //   }
        // })
        // // if (this.pageInfo.messageType) {
        // //   for (let key in this.pageInfo.messageType) {
        // //     let temp = {
        // //       name: key,
        // //       value: this.pageInfo.messageType[key]
        // //     }
        // //     arr.push(temp)
        // //   }
        // // }
        // this.pageInfo.pie = arr
        if (rsp.data.length === 0) {
          this.showErrMsg('当前查询的日期或条件没有符合的数据~')
        } else {
          this.$nextTick(() => {
            this.init1()
            this.init2()
          })
        }
      }).catch(e => {
        this.loading = false
        // this.handleError(e)
      })
    },
    // 获取日期的区间
    getdiffdate (stime, etime) {
      // 初始化日期列表，数组
      var diffdate = []
      var i = 0
      // 开始日期小于等于结束日期,并循环
      while (stime <= etime) {
        diffdate[i] = stime
        // 获取开始日期时间戳
        var stimeTs = new Date(stime).getTime()
        // 增加一天时间戳后的日期
        var nextDate = stimeTs + (24 * 60 * 60 * 1000)
        // 拼接年月日，这里的月份会返回（0-11），所以要+1
        var nextDatesY = new Date(nextDate).getFullYear() + '-'
        var nextDatesM = (new Date(nextDate).getMonth() + 1 < 10) ? '0' + (new Date(nextDate).getMonth() + 1) + '-' : (new Date(nextDate).getMonth() + 1) + '-'
        var nextDatesD = (new Date(nextDate).getDate() < 10) ? '0' + new Date(nextDate).getDate() : new Date(nextDate).getDate()
        stime = nextDatesY + nextDatesM + nextDatesD
        // 增加数组key
        i++
      }
      return diffdate
    },
    // 时间戳转换判断是否需要加0
    add0 (m) {
      return m < 10 ? '0' + m : m
    },
    getTable () {
      // this.loading = true
      if (!this.timeValue1) {
        this.count = 0
        this.preOptions = []
        return
      }
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/analyze/${appid}/mass/tagStat?wechatId=${sessionStorage.getItem('wechatId')}&pageSize=${this.pageSize}&currentPage=${this.page}&startTime=${(this.timeValue1 && this.timeValue1[0]) || ''}&endTime=${(this.timeValue1 && this.timeValue1[1]) || ''}`
      this.get(url).then(rsp => {
        this.loading = false
        let data = rsp.data.data
        if (data) {
          this.count = +data.total
          if (data.list && data.list.length) {
            this.preOptions = data.list
            // this.preOptions = data.list.map(item => {
            //   return {
            //     tags: item.tagName,
            //     type: item.tagType === 0 ? 'medchat' : '微信',
            //     num1: item.tagNumber,
            //     num2: item.sendCount,
            //     num3: item.data.intPageReadCount,
            //     // num4: item.data.open_rates,
            //     num5: item.data.shareCount,
            //     num6: item.data.likeCount,
            //     num7: item.data.oriPageReadUser
            //   }
            // })
          } else {
            this.preOptions = []
          }
        } else {
          this.preOptions = []
        }
      }).catch(e => {
        this.loading = false
        // this.handleError(e)
      })
    }
  },
  created () {

  },
  mounted () {
    // 时间进页面默认为昨天
    let date = new Date().getTime() - 3600 * 1000 * 24
    date = new Date(date)
    let tmp = new Date().getTime() - 3600 * 1000 * 24 * 31
    let time = new Date(tmp)
    let todayTime = time.getFullYear() + '-' + this.add0(date.getMonth() + 1) + '-' + this.add0(date.getDate())
    let lastTime = time.getFullYear() + '-' + this.add0(time.getMonth() + 1) + '-' + this.add0(time.getDate())
    this.timeValue = []
    this.timeValue.push(lastTime, todayTime)
    this.timeValue1.push(lastTime, todayTime)
    this.getInfo()
    this.getTable()
    this.$nextTick(() => {
      window.onresize = () => {
        this.chart1.resize()
        this.chart2.resize()
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
  .report-fourth
    position relative
    background #fafafa
    padding-right 10px
    .rf-fourth
      padding-left 10px
      background #fafafa
      .top
        padding 10px
        margin-bottom 10px
        background #fff
      .middle
        display flex
        justify-content space-between
        margin-bottom 20px
        height 118px
        .m-item
          flex 1
          position relative
          between()
          align-items center
          padded_box(border-box, 8px 24px 2px 8px)
          height 100%
          border-top-left-radius 4px
          border-top-right-radius 4px
          box-shadow 0 3px 12px 0 rgba(223,234,239,.7);
          cursor pointer
          transition all 0.2s ease
          background #fff
          .img-wrapper
            // border 1px solid red
            min-width 56px
            height 86px
            background-position center
            background-repeat no-repeat
            background-size 70px 70px
          .r-wrapper
            flex 1
            display flex
            flex-direction column
            justify-content space-around
            // padded_box(border-box, 13px 0)
            text-align right
            font-size 12px
            min-width 60px
            .w-top
              font-size 12px
            .w-middle
              font-size 20px
              line-height 40px
            .w-bottom
              color #7F7F7F
              font-size 12px
          .img1
            background-image url('../imgs/jiantou.png')
          .img2
            background-image url('../imgs/time.png')
          .img3
            background-image url('../imgs/message.png')
          .line1
            background-color #15C78A
          .line2
            background-color #FA376C
          .line3
            background-color #3496FF
          .line4
            background-color #FFD64E
          .line
            position absolute
            left 0
            bottom 0px
            opacity .1
            width 100%
            height 8px
            border-bottom-left-radius 4px
            border-bottom-right-radius 4px
            transition opacity ease .4s
          .is-line
            opacity 1
          .e-chart2
            width 240px
            height 86px
        .m-item + .m-item
          margin-left 10px
        .m-item:last-child
          width 30%
        .m-item:hover
          box-shadow 0px 2px 18px rgba(0, 0, 0, .1)
      .bottom
        background #fff
        .e-chart1
          width 100%
          height 310px
    .rf-third
      margin-top 20px
      padded_box(border-box, 20px 30px)
      background #fff
      border-radius 10px
      margin-left 10px
      .pagenation
        center()
        margin-top 20px
</style>
